<template>
  <!-- <div class="content-box">
  <common-header :title="title" :showleft="true"></common-header>-->

  <div class="page-content">
    <div class="product-box">
      <h2>{{product.title}}</h2>
      <div class="details">
        <div class="banner" v-if="product.cover">
          <img v-lazy="apihost + product.cover" alt />
        </div>
        <div class="detailsList">
          <div>
            <p class="title">项目规模</p>
            <p class="text">
              ¥
              <span>{{product.count}}</span>
            </p>
          </div>
          <div>
            <p class="title">起投金额</p>
            <p class="text">
              <span>{{product.price}}</span>元
            </p>
          </div>
          <div>
            <p class="title">项目期限</p>
            <p class="text">
              <span>{{product.day}}</span>个自然日
            </p>
          </div>
        </div>
      </div>
      <div class="rawrd" style="margin-top:4px;" v-if="product.activity_status=='on'">
        <img :src="rward" />
        <p>投资立返{{product.bonus}}元</p>
      </div>
      <div class="category">
        <div class="categoryName">日化收益：</div>
        <div class="categoryText">{{product.rate}}%</div>
      </div>
      <div class="category">
        <div class="categoryName">分红方式：</div>
        <div class="categoryText">{{product.desc}}</div>
      </div>
      <div class="category">
        <div class="categoryName">担保机构：</div>
        <div class="categoryText">{{product.companys}}</div>
      </div>

      <div class="category">
        <div class="categoryName">投放进度:</div>
        <div class="categoryText">
          <van-progress :value="product.progress" color="#f2826a" :percentage="product.progress"></van-progress>
        </div>
      </div>
      <div class="category bordernone">
        <div class="categoryName">项目说明：</div>
        <div class="categoryText">{{product.desc}},到期还本</div>
      </div>
    </div>
    <div class="product-html" v-html="htmlContent"></div>
    <div class="Investment">
      <div class="btn" @click="pay()">马上投资</div>
    </div>
  </div>

  <!-- </div> -->
</template>

<script>
import { projectOneApi } from "@/api";
import rward from "@/assets/imgs/rward.png";
import { API_HOST } from "@/store/mutation-types";
export default {
  data() {
    return {
      apihost: "",
      title: "我要投资",
      rward,
      product: {
        profitn: "",
        day: 0,
        cover: "",
        count: "",
        content: "",
        tname: "",
        rate: 0,
        title: "",
        price: "",
        progress: ""
      },
      data: 0
    };
  },
  mounted() {
    this.product.title = this.$route.query.title;
    this.product.token = this.$route.query.token;
    this.apihost = this.$ls.get(API_HOST);
    if (!this.apihost) {
      this.$store.dispatch("GET_CONF").then(res => {
        this.apihost = res.data.apihost;
      });
    }
    projectOneApi({ token: this.$route.query.token }).then(res => {
      if (res.code == 200) Object.assign(this.product, res.data);
    });
  },
  computed: {
    htmlContent() {
      return this.product.content
        .replace(/&amp;nbsp;/g, " ")
        .replace(this.product.content ? /&(?!#?\w+;)/g : /&/g, "&amp;")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'");
    }
  },
  methods: {
    pay() {
      this.$router.push({
        name: "productPay",
        query: { token: this.product.token }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.page-content {
  margin-bottom: 1.30666667rem;
  padding-bottom: 2.5rem;
}
.banner {
  img {
    width: 100%;
    vertical-align: top;
  }
}
.product-box {
  background: #fff;
  border: 1px solid #ddd;
  margin: 0.15rem 0.05rem;
  clear: both;
  padding: 0.2rem;
  font-size: 0.4rem;
  overflow: hidden;
  word-wrap: break-word;
  h2 {
    font: 0.3rem/2.5 "Microsoft YaHei";
    color: #333;
    border-bottom: 1px solid #ddd;
  }
  .details {
    padding: 0.1rem;
    border-bottom: 1px solid #ddd;
    .detailsList {
      overflow: hidden;
      background: #f5f5f5;
      display: flex;
      div {
        padding: 0.4rem 0;
        flex: 1;
        text-align: center;
        .title {
          color: #999;
          font: 0.28rem/2 "Microsoft YaHei";
        }
        .text {
          font: 0.28rem/2 "Microsoft YaHei";
          color: #333;
          span {
            font-size: 0.6rem;
            color: @base-color;
          }
        }
      }
    }
  }
  .category {
    font: 0.3rem/2.75 "Microsoft YaHei";
    color: #666;
    border-bottom: 1px solid #ddd;
    display: flex;
    text-align: left;
    .categoryName {
      width: 1.75rem;
    }
    .categoryText {
      flex: 1;
    }
    &.bordernone {
      padding-bottom: 0;
      border: none;
    }
  }
  .productPer {
    text-align: right;
    font-size: 0.24rem;
    color: #666;
    span {
      font-size: 0.5rem;
      color: @base-color;
    }
  }
}

.product-html {
  padding: 0.2rem;
  overflow: hidden;
  word-wrap: break-word;
  background: #fff;
}
/deep/ .mt-progress-progress {
  background: @base-color;
}
.Investment {
  padding: 0.25rem 0.35rem;
  position: fixed;
  bottom: 50px;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  border-top: 1px #ccc solid;
  background: #fff;
  .btn {
    background-color: @base-color;
    border: 0px;
    cursor: pointer;
    text-align: center;
    border-radius: 0.12rem;
    font: 0.45rem/2.5 "Microsoft YaHei";
    color: #fff;
  }
}
/deep/ .van-progress {
  margin: 0.35rem 0;
}
.rawrd {
  width: 95%;
  border: 1px solid #fd3939;
  border-radius: 40px;
  background: rgba(253, 57, 57, 0.2);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  img {
    width: 28px;
    margin-right: 12px;
  }
  color: rgb(253, 57, 57, 1);
}
</style>
<style>
.product-html table {
  width: 100% !important;
  padding: 0.2rem;
  table-layout: fixed;
  overflow: hidden;
}
.product-html th,
.product-html td {
  border: 1px solid rgb(44, 62, 80);
  padding: 0.2rem 0.1rem;
}
.product-html td {
  /* max-width: 50% !important; */
  border-style: solid;
  word-break: break-all !important;
  word-wrap: break-word !important;
}
.product-html td.et2,
.product-html td {
  width: 20% !important;
  line-height: 1.5 !important;
}
.product-html td.et3,
.product-html td:nth-child(2) {
  width: 80% !important;
  line-height: 1.5 !important;
}

.product-html img {
  max-width: 100% !important;
  height: auto !important;
}
</style>